<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2646654_d87nflpimvt.css">
    <link rel="stylesheet" href="../css/common_h&f.css">
    <link rel="stylesheet" href="../css/goodsDetail.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
</head>

<body>
    <div class="header">
        <div class="header-top">
            <div class="header-top0 w1">
                <div class="headerLeft">
                    <p>
                        <span>嗨，欢迎来订花乐！</span>
                    <div class="inline">
                        <span class="linkwc">
                            <i class="iconfont icon-weixin"></i>
                            关注微信
                        </span>
                        <p class="imgHide">
                            <img class="wechat0" src="https://cs.dinghuale.com/uploads/20200706/202007061732083685.jpg"
                                alt="">
                        </p>
                    </div>

                    </p>
                </div>
                <div class="headerRight">
                    <span class="tips">
                        <a href="./reg&login.html">你好，请登录</a>
                        <a href="./reg&login.html">免费注册</a>
                    </span>
                    |
                    <a href="">订单查询</a>
                    |
                    <a href="./shoppingCar.html">
                        <i class="iconfont icon-gouwuche"></i>
                        购物车
                        <!-- <span class="carnum">
                            (0)
                        </span> -->
                    </a>
                    |
                    <div class="inline">
                        <a href="javaScript:;">手机下单</a>
                        <span class="imgHide">
                            <img class="wechat1" src="https://upyun.dinghuale.com/public/images/xiaochengxu.png" alt="">
                        </span>

                    </div>
                </div>
            </div>
        </div>
        <div class="header-mid w1">
            <div class="barLeft fl">
                <a href="../index11.html">
                    <img src="https://upyun.dinghuale.com/uploads/images/logo.png" alt="">
                </a>
            </div>
            <div class="barMid fl">
                <div class="search-bar">
                    <input type="text" name="" id="" class="search-inp" placeholder="请输入要搜索的关键字"><button><i
                            class="iconfont icon-49"></i></button>
                </div>
                <div class="search-key">
                    <a href="">红玫瑰</a>
                    <span>|</span>
                    <a href="">蛋糕</a>
                    <span>|</span>
                    <a href="">百合</a>
                    <span>|</span>
                    <a href="">康乃馨</a>
                    <span>|</span>
                </div>
            </div>
            <div class="barRight">
                <i class="iconfont icon-dianhua_2"></i>
                <span>400-060-1520</span>
            </div>
        </div>
        <div class="header-footer w cl df">
            <div class="header-footerL">
                <div class="headerL df ">
                    <p>全部商品分类</p>
                    <i class="iconfont icon-xiangxia"> </i>
                </div>
                <div class="headerHide">
                    <div>
                        <p>用途</p>
                        <ul class="">
                            <a href="">爰情鲜花</a>
                            <a href="">生日鲜花</a>
                            <a href="">友情鲜花</a>
                            <a href="">探病问候</a>
                            <a href="">道歉鲜花</a>
                            <a href="">问候长辈</a>
                            <a href="">感谢老师</a>
                            <a href="">哀思鲜花</a>
                            <a href="">商务鲜花</a>
                        </ul>
                    </div>
                    <div>
                        <p>花材</p>
                        <ul class="">
                            <a href="">玫瑰</a>
                            <a href="">百合</a>
                            <a href="">康乃馨</a>
                            <a href="">向日葵</a>
                            <br>
                            <a href="">满天星</a>
                            <a href="">郁金香</a>
                            <a href="">菊花</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                    <div>
                        <p>类别</p>
                        <ul class="">
                            <a href="">花束</a>
                            <a href="">礼盒</a>
                            <a href="">蛋糕</a>
                            <a href="">花篮</a>
                            <a href="">绿植</a>
                            <a href="">周花</a>
                            <a href="">手提花篮</a>
                            <a href="">桌花</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                    <div>
                        <p>枝数</p>
                        <ul class="laa">
                            <a href="">11枝</a>
                            <a href="">19枝</a>
                            <a href="">21枝</a>
                            <a href="">33枝</a>
                            <br>
                            <a href="">52枝</a>
                            <a href="">66枝</a>
                            <a href="">99枝</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="navList cl ">
                <a href="">鲜花</a>
                <a href="">花束</a>
                <a href="">礼盒</a>
                <a href="">蛋糕</a>
                <a href="">花篮</a>
                <a href="">绿植</a>
                <a href="">周花</a>
            </div>
        </div>
    </div>
    <hr>
    </hr>
    <div class="kongbai"></div>
    <div class="goodsMain">
        <div class="goodsMain0 box df">
            <div class="goodsMainLeft w left">
                <div class="leftBox">
                    <img src="" alt="" class="smallImg">
                    <div class="shadow"></div>
                </div>
            </div>
            <div class="goodsMainRight right">
                <!-- <div class="rightBox">
                    <div class="rightBoxsmall">
                        <img src="https://upyun.dinghuale.com/uploads/20210426/202104261052065667.jpg" alt=""
                            class="bigImg">
                    </div>
                    <div class="goodsTitle">粉色公主</div>
                    <div class="goodsTitle0">
                        <div>
                            <span>材料：
                                <span>11枝精品粉玫瑰，尤加利，银叶菊适量搭配</span>
                            </span>

                        </div>
                        <div>
                            <span>包装：
                                <span>浅色包装纸精美包装</span>
                            </span>

                        </div>
                        <div>
                            <span>附送：
                                <span>下单填写留言，免费赠送贺卡</span>
                            </span>

                        </div>
                        <div>
                            <span>配送：
                                <span>全国送货上门，市区免运费</span>
                            </span>
                        </div>
                        <div>
                            <span>优惠券：</span>
                            <span>暂无优惠券</span>
                        </div>
                        <div class="df">
                            <span>配送时间:</span>
                            <div>2021-07-10</div>
                            <select name="" id="">
                                <option value="">不限时间</option>
                                <option value="">8:00-10:00</option>
                                <option value="">10:00-12:00</option>
                                <option value="">12:00-14:00</option>
                                <option value="">14:00-16:00</option>
                                <option value="">16:00-18:00</option>
                                <option value="">18:00-20:00</option>
                                <option value="">20:00-22:00</option>
                                <option value="">上午</option>
                                <option value="">中午</option>
                                <option value="">晚上</option>
                            </select>
                            <select name="" id="">
                                <option value="">市区免费配送</option>
                                <option value="">近郊+30:00运费</option>
                                <option value="">远郊+50:00运费</option>
                            </select>
                        </div>
                    </div>
                    <div class="goodsTitle1 cl">
                        <p>
                            <span>店铺价：</span>
                            <span>￥169</span>
                        </p>
                        <div class="df">
                            <p>
                                <span>
                                    市场价：&ensp;￥
                                </span>
                                <span style="text-decoration:line-through">259</span>
                            </p>
                            <p>销量
                                <span>9875</span>
                                笔
                            </p>
                        </div>
                    </div>
                    <div class="aboutBuy df cl">
                        <div class="df">
                            <span>数量：</span>
                            <ul class="df">
                                <li class="jian">-</li>
                                <li>
                                    <input type="text" value="1">
                                </li>
                                <li class="jia">+</li>
                            </ul>
                        </div>
                        <div class="df">
                            <p>加入购物车</p>
                            <p>立即购买</p>
                        </div>

                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <div class="kongbai"></div>

    <div class="goodsDetail">
        <div class="w">
            <div class="goodsDetailLeft fl">
                <p>
                    <img src="https://upyun.dinghuale.com/public/images/recommend.png" alt="">
                </p>
                <div>
                    <a href="./goodsList.html">
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20210426/202104261052034321.jpg" alt="">
                            <p>粉色公主</p>
                            <div class="df">
                                <p>￥169</p>
                                <p>销量9875笔</p>
                            </div>
                        </li>
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20210426/202104261259483341.jpg" alt="">
                            <p>一生守候</p>
                            <div class="df">
                                <p>￥319</p>
                                <p>销量6599笔</p>
                            </div>
                        </li>
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20210426/202104261339329479.jpg" alt="">
                            <p>你是唯一</p>
                            <div class="df">
                                <p>￥659</p>
                                <p>销量9821笔</p>
                            </div>
                        </li>
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20210426/202104261310519646.jpg" alt="">
                            <p>满天繁星</p>
                            <div class="df">
                                <p>￥299</p>
                                <p>销量6598笔</p>
                            </div>
                        </li>
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20201208/202012081501255872.jpg" alt="">
                            <p>温暖阳光</p>
                            <div class="df">
                                <p>￥269</p>
                                <p>销量7710笔</p>
                            </div>
                        </li>
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20210426/202104261056513801.jpg" alt="">
                            <p>美丽心情</p>
                            <div class="df">
                                <p>￥239</p>
                                <p>销量7548笔</p>
                            </div>
                        </li>
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20200630/202006301617407670.jpg" alt="">
                            <p>浪漫满屋</p>
                            <div class="df">
                                <p>￥229</p>
                                <p>销量11229笔</p>
                            </div>
                        </li>
                        <li>
                            <img src="https://upyun.dinghuale.com/uploads/20210426/202104261306508528.jpg" alt="">
                            <p>如约而至</p>
                            <div class="df">
                                <p>￥499</p>
                                <p>销量9598笔</p>
                            </div>
                        </li>
                    </a>
                </div>
            </div>
            <div class="goodsDetailRight">
                <p>
                    <span class="cpxq">产品详情</span>
                    <span class="yhpj">用户评价(1330)</span>
                    <span class="hhbz">售后保障</span>
                </p>
                <div class="goodsDetailRightPic">
                    <div class="goodsDetailRightPicTop">
                        <img src="https://upyun.dinghuale.com/uploads/20200630/202006301618226406.jpg" alt="">
                        <img src="https://upyun.dinghuale.com/uploads/20200701/202007011529525682.jpg" alt="">
                        <img src="https://upyun.dinghuale.com/uploads/20200630/202006301618137819.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="goodsDetailFooter cl">
                <div>
                    <div>
                        <img src="https://www.dinghuale.com/public/images/alike.png" alt="">
                    </div>
                    <ul class="">
                        <li>
                            <a href="./goodsList.html">
                                <img src="https://upyun.dinghuale.com/uploads/20210426/202104261144561025.jpg" alt="">
                                <p>一往情深</p>
                                <div class="df">
                                    <p>￥229</p>
                                    <p>销量12567笔</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="./goodsList.html">
                                <img src="https://upyun.dinghuale.com/uploads/20210426/202104261208472868.jpg" alt="">
                                <p>浪漫告白</p>
                                <div class="df">
                                    <p>￥299</p>
                                    <p>销量19578笔</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="./goodsList.html">
                                <img src="https://upyun.dinghuale.com/uploads/20210519/202105191204581151.jpg" alt="">
                                <p>为你心动</p>
                                <div class="df">
                                    <p>￥319</p>
                                    <p>销量9877笔</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="./goodsList.html">
                                <img src="https://upyun.dinghuale.com/uploads/20210426/202104261034509175.jpg" alt="">
                                <p>粉色恋曲</p>
                                <div class="df">
                                    <p>￥159</p>
                                    <p>销量6358笔</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer cl">

    </div>
</body>
<script src="../js/common_h&f.js"></script>
<script>

    // 引入尾部
    $(".footer").load("./common_footer.html");

    $(".search-key a").attr("href", "./goodsList.html");
    $(".headerHide a").attr("href", "./goodsList.html");
    $(".navList a").attr("href", "./goodsList.html");

    //标识用户身份
    var tips = document.getElementsByClassName("tips")[0];
    var user = getCookie("lgc");
    if (user) {
        tips.innerHTML = `欢迎您,${user} <a onsubmit="return false" onclick="exit()">退出</a>`;
    }
    function exit() {
        delCookie("lgc");
        location.reload();
    }

    $(function () {



        // 二级菜单显隐效果
        $(document).on("mouseenter", function () {
            $(".headerL").mouseenter(function () {
                $(".headerHide").css({ display: "block" });
            })
            $(".header-footerL").mouseleave(function () {
                $(".headerHide").css({ display: "none" });
            })
        })



        //放大镜Start
        $(".shadow").css({ display: "none" });
        $(".bigImg").css({ display: "none" });
        $(".rightBoxsmall").css({ display: "none" });


        $(".leftBox").mouseenter(function () {
            $(".shadow").css({ display: "block" });
            $(".bigImg").css({ display: "block" });
            $(".rightBoxsmall").css({ display: "block" });
        }).mouseleave(function () {
            $(".shadow").css({ display: "none" });
            $(".bigImg").css({ display: "none" });
            $(".rightBoxsmall").css({ display: "none" });
        })


        $(".leftBox").mousemove(function (e) {
            let clientX = e.pageX;//
            let clientY = e.pageY;
            let leftX = $(".left").offset().left;
            let leftY = $(".left").offset().top;
            let shadowWidth = $(".shadow").width();
            let x = clientX - leftX - shadowWidth / 2;
            let y = clientY - leftY - shadowWidth / 2;
            let maxX = $(".leftBox").width() - $(".shadow").width();
            let maxY = $(".leftBox").height() - $(".shadow").height();
            if (x <= 0) x = 0;
            if (y <= 0) y = 0;
            if (x >= maxX) x = maxX;
            if (y >= maxY) y = maxY;
            let bigX = $(".bigImg").width() * x / $(".smallImg").width();
            let bigY = $(".bigImg").height() * y / $(".smallImg").height();
            $(".shadow").css({
                left: x,
                top: y
            })
            $(".bigImg").css({
                left: -bigX,
                top: -bigY
            })
        })
        //放大镜end






        var leftDiv = document.getElementsByClassName("left")[0];
        var rightDiv = document.getElementsByClassName("right")[0];

        var url = urlParse();  // {}
        console.log(url);
        if (!url.gid) { // 如果不传gid
            location.href = "./goodsList.html";
        }


        searchGoodsByGoodsId({ gid: url.gid }).then(function (result) {
            var { status, detail, data } = result;
            if (status) {
                var { id, goodsId, goodsName, goodsImg, goodsPrice, smallPicList, bigPicList, goodsDetail } = data;

                var smallImg = leftDiv.getElementsByClassName("smallImg")[0];
                smallImg.src = goodsImg;

                // var switchList = leftDiv.getElementsByClassName("switchList")[0];

                // var html = "";
                // var len = smallPicList.length > 6 ? 6 : smallPicList.length;
                // for (var i = 0; i < len; i++) {
                //     var img = smallPicList[i];
                //     html += `<li><img src="${img}" alt=""></li>`;
                // }
                // switchList.innerHTML = html;


                // right 
                rightDiv.innerHTML = `
                <div class="rightBox">
                    <div class="rightBoxsmall">
                        <img src="${goodsImg}" alt=""
                            class="bigImg">
                    </div>
                    <div class="goodsTitle">${goodsName}</div>
                    <div class="goodsTitle0">
                        <div>
                            <span>材料：
                                <span>11枝精品粉玫瑰，尤加利，银叶菊适量搭配</span>
                            </span>

                        </div>
                        <div>
                            <span>包装：
                                <span>浅色包装纸精美包装</span>
                            </span>

                        </div>
                        <div>
                            <span>附送：
                                <span>下单填写留言，免费赠送贺卡</span>
                            </span>

                        </div>
                        <div>
                            <span>配送：
                                <span>全国送货上门，市区免运费</span>
                            </span>
                        </div>
                        <div>
                            <span>优惠券：</span>
                            <span>暂无优惠券</span>
                        </div>
                        <div class="df">
                            <span>配送时间:</span>
                            <div>2021-07-10</div>
                            <select name="" id="">
                                <option value="">不限时间</option>
                                <option value="">8:00-10:00</option>
                                <option value="">10:00-12:00</option>
                                <option value="">12:00-14:00</option>
                                <option value="">14:00-16:00</option>
                                <option value="">16:00-18:00</option>
                                <option value="">18:00-20:00</option>
                                <option value="">20:00-22:00</option>
                                <option value="">上午</option>
                                <option value="">中午</option>
                                <option value="">晚上</option>
                            </select>
                            <select name="" id="">
                                <option value="">市区免费配送</option>
                                <option value="">近郊+30:00运费</option>
                                <option value="">远郊+50:00运费</option>
                            </select>
                        </div>
                    </div>
                    <div class="goodsTitle1 cl">
                        <p>
                            <span>店铺价：</span>
                            <span>￥${goodsPrice}</span>
                        </p>
                        <div class="df">
                            <p>
                                <span>
                                    市场价：&ensp;￥
                                </span>
                                <span style="text-decoration:line-through">999</span>
                            </p>
                            <p>销量
                                <span>9875</span>
                                笔
                            </p>
                        </div>
                    </div>
                    <div class="aboutBuy df cl">
                        <div class="df">
                            <span>数量：</span>
                            <ul class="df">
                                <li class="jian">-</li>
                                <li>
                                    <input type="" class="count-input" value="1">
                                </li>
                                <li class="jia">+</li>
                            </ul>
                        </div>
                        <div class="df">
                            <p class="addToShoppingCar">加入购物车</p>
                            <p>立即购买</p>
                        </div>

                    </div>
                </div>`

                // detailDiv.innerHTML = goodsDetail;

                //事件委托加号减号
                rightDiv.onclick = async function (e) {
                    var e = e || window.event;
                    var target = e.target || e.srcElement;

                    if (target.classList.contains("jia")) {

                        // if (prev(target).value <= 1) {
                        //     prev(prev(target)).innerHTML = "&nbsp;";
                        // } else {
                        //     prev(prev(target)).innerHTML = "-";
                        // }
                        chil(prev(target))[0].value++;


                        console.log(prev(target));
                        console.log(chil(prev(target))[0].value * 1);

                        console.log(prev(target).children);
                        // var num = prev(target).value
                        // console.log(prev(target).value);
                        // prev(target).value = num;
                    } else if (target.classList.contains("jian")) {

                        // if (target.value == 1) {
                        //     target.innerHTML = "&nbsp;";
                        // } else if (target.value > 1) {
                        //     target.innerHTML = "-";
                        // }

                        if (chil(next(target))[0].value <= 1) {
                            // next(target).textContent = "";
                            return false; // 数量为1的时候不能再减
                        }
                        chil(next(target))[0].value--;
                    }
                }

                // 加入购物车
                var addBtn = document.getElementsByClassName("addToShoppingCar")[0];
                addBtn.onclick = async function () {
                    console.log("准备加入购物车");

                    // 加入购物车  需要知道的信息
                    // 谁?             (谁的账号就是谁卖的)
                    // 买了什么东西?    (每一件商品都有唯一的编号 (id,gid))
                    // 买了几件? 

                    // 谁?  
                    // 1. 加入购物车之前,需要判断用户是否登录?  
                    // 有lgc  登录  => 加入购物车
                    // 没有lgc  没有登录  => 滚去登录 

                    var countInput = document.getElementsByClassName("count-input")[0];
                    var user = getCookie("lgc");
                    var gId = url.gid;
                    console.log(url);

                    var buyNum = countInput.value;

                    if (user) {  // 有lgc  登录  => 加入购物车
                        // 加入购物车   (谁? 买了什么东西? 买了多少件)
                        var result = await addToShoppingCar({ user, gId, buyNum });
                        console.log(result);
                        var { status, detail } = result;
                        if (status) {
                            if (confirm("加入成功,是否进入购物车?")) {
                                location.href = "./shoppingCar.html";
                            }
                        } else {
                            alert(detail);
                        }
                    } else {  // 没有lgc  没有登录  => 滚去登录   

                        // 问题?  
                        // 详情页  => 登录页  => 主页  (期望:从哪里来,回哪里去  回到详情页)

                        // 怎么解决?
                        // 详情页  => 登录页 拼接一个returnUrl记录当前详情页地址   

                        location.href = "./reg&login.html?returnUrl=" + encodeURIComponent(location.href);

                        // location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
                    }
                }
            } else {
                location.href = "./goodsList.html";
            }
        })

        function chil(ele) {
            return ele.children || ele.childNodes;
        }

        function prev(ele) {
            return ele.previousElementSibling || ele.previousSibling;
        }

        function next(ele) {
            return ele.nextElementSibling || ele.nextSibling;
        }
    })
</script>

</html>